<template>
    <div class="fields">
        <hd-tab :tabs="tabs"/>


        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>表单字段</span>
            </div>
            <el-alert
                :title="`正在管理【${article.title}】模型字段`"
                type="info"
                description="修改字段后需要点击保存提交才会生效"
                show-icon>
            </el-alert>

            <el-table
                size="mini"
                border
                :data="article.fields"
                style="width: 100%">
                <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="表单名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="表单类型">
                </el-table-column>
                <el-table-column
                    #default="{row:field}"
                    label="中文表单名称">
                    {{ type(field) }}
                </el-table-column>
                <el-table-column
                    #default="{row:field}"
                    prop="system"
                    label="系统字段">
                    <span v-show="!!field.system">是</span>
                </el-table-column>
                <el-table-column
                    prop="placeholder"
                    label="提示信息"
                    width="180">
                </el-table-column>
                <el-table-column
                    #default="{row}"
                    label="操作">
                    <edit :field="row" class="inline-block">编辑</edit>
                    <el-button type="danger" size="mini" @click="del(field)">删除</el-button>
                </el-table-column>

            </el-table>
            <el-button-group>
                <el-button type="success" class="mt-2" @click="add">添加自定义字段</el-button>
                <el-button type="primary" class="mt-2" @click="onSubmit">保存</el-button>
            </el-button-group>

        </el-card>

    </div>
</template>

<script>
import tabs from './tabs'
import Edit from './components/Edit'
import types from './components/types'
import fields from './fields'

//默认值用于添加字段
const field = {
    title: '',
    name: '',
    type: 'input',
    placeholder: '',
    value: '',
    options: '',
    rank: 0,
    show: true,
    validate_rule: '',
    validate_error: ''
}
export default {
    route: {path: 'article/field/:id/index'},
    components: {Edit},
    data() {
        return {
            tabs,
            types,
            article: {}
        }
    },
    async created() {
        this.article = await axios.get(`admin/article/${this.$route.params.id}`)
        // this.$set(this.article, 'fields', fields)
    },
    methods: {
        //类型中文
        type(field) {
            return this.types.find(t => t.type == field.type).label
        },
        //添加字段
        add() {
            this.article.fields.push(Object.assign({}, field))
        },
        //删除非系统字段
        del(field) {
            this.$confirm(`确定删除【${field.title}】吗?`, '温馨提示').then(_ => {
                let index = this.article.fields.findIndex(f => f.name == field.name)
                this.article.fields.splice(index, 1)
            })
        },
        //保存
        onSubmit() {
            if (this.article.fields.some(f => f.name == '' || f.title == '')) {
                return this.$message.error(`有字段数据不完整`)
            }
            axios.put(`admin/article/${this.$route.params.id}`, this.article)
            this.router('admin.article.index')
        }
    }
}
</script>
